const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin');
const CopyWebpackPlugin = require("copy-webpack-plugin")
/* 
  esLint配置过程:
    1. 下载eslint
    2. 在项目根目录创建.eslintrc.json文件,并进行配置
    3. 下载 eslint-webpack-plugin 插件
    4. 引入并使用这个插件
*/

module.exports = {
    entry: path.resolve(__dirname, '../src/index.js'),
    output: {
        path: path.resolve(__dirname, '../build'),
        filename: './js/bundls.js'
    },
    module: {
        rules: [{
                test: /\.css$/i,
                // use: ["style-loader",'css-loader']
                use: [MiniCssExtractPlugin.loader, 'css-loader']

            }, {
                test: /\.less$/i,
                /*  use: [
                     //use中loader加载是有顺序的，先下后上，注意有的loader需要按照顺序书写
                     "style-loader",
                     'css-loader',
                     'less-loader'
                 ] */
                use: [
                    //use中loader加载是有顺序的，先下后上，注意有的loader需要按照顺序书写
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ]
            }, {
                test: /\.(png|jpg|gif|webp)$/,
                //asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。代替之前的url-loader和file-loader
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        maxSize: 30 * 1024, // 小于30kb以下的图片会被打包成base64格式
                    },
                },
                generator: {
                    filename: 'images/[name][ext]'
                }
            },
            /*  {
                 test: /\.(htm|html)$/i,
                 use: {
                     loader: 'html-loader'
                 }
             } */
        ]
    },

    //优化的配置
    optimization: {
        minimizer: [
            new CssMinimizerPlugin(),
        ],
    },


    //插件配置
    plugins: [new MiniCssExtractPlugin({
        //输出独立文件的文件名
        filename: 'css/main.css'
    }), new HtmlWebpackPlugin({
        filename: "index.html",
        template: path.resolve(__dirname,"../public/index.html"),
        minify: {
            collapseWhitespace: true,
            keepClosingSlash: true,
            removeComments: true,
            removeRedundantAttributes: true,
            removeScriptTypeAttributes: true,
            removeStyleLinkTypeAttributes: true,
            useShortDoctype: true
        }
    }), new ESLintPlugin({
        fix: true
    }), new CopyWebpackPlugin({
        //patterns 模式
        patterns: [{
            from: path.resolve(__dirname,"../public"), //from 是从哪里复制
            to: "public", //打包目录
            //配置复制时忽略的文件
            globOptions: {
                ignore: ["**/index.html"]
            }
        }],
    }), ],

    mode: 'production'
}